<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>表单标签</h2>
    <div>
        <input type="text" placeholder="表单外的输入框">
    </div>
    <!-- form 表单标签, 是一个容器 -->
    <form action="数据要提交的地址">
        <!-- input 通过 type 设置不同的外观 -->
        <div>
            <input type="text" placeholder="输入用户名">  
            
        </div>
        <div>
            <input type="password" placeholder="输入密码">
        </div>
        <!-- 对于单选框, 使用 name 让浏览器知道是一组 -->
        <!-- for 关联指定标签的 id 属性 -->
        <div>
            <input type="radio" id="male" name="gender" value="1"><label for="male">男</label>
            <input type="radio" id="female" name="gender" value="2"><label for="female">女</label>
            <input type="radio" id="secret" name="gender" value="3"><label for="secret">保密</label>
        </div>
        <div>
            <!-- value 放置的是要收集的数据, label 中放置的是展示给用户看的 -->
            <input type="checkbox" id="sing" value="4"><label for="sing">唱</label>
            <input type="checkbox" id="dance" value="5"><label for="dance">跳</label>
            <input type="checkbox" id="rap" value="6"><label for="rap">rap</label>
            <input type="checkbox" id="basketball" value="7"><label for="basketball">打篮球</label>
        </div>
        <div>
            <!-- 文本域 -->
            <textarea name="" id="" placeholder="个性签名"></textarea>
        </div>
        <div>
            <!-- type 设置按钮的类型
             button 默认
             submit 提交, 可以结合 form 表单提交数据到指定的 url 地址
             reset 重置, 重置的是所在 form 表单内部的元素
            -->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <h2>度百搜索引擎</h2>
    <form action="https://www.baidu.com/s">
        <div>
            <input type="text" placeholder="输入关键词" value="" name="wd">
        </div>
        <div>
            <button type="submit">去搜索</button>
        </div>
    </form>
</body>
</html>